<link href="/bemigo/styles/main.css" rel="stylesheet" type="text/css">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
function getHunchReco(topic_id, topic_name){
	var param = new Object();
	param["friend_id"] = "fb_"+friend_fb_id;
	param["topic_ids"] = topic_id;
	param["limit"] = 5;
	Hunch.api('get-recommendations', param, function(response){
		$('</br><div><h2>'+topic_name+'</h2></div></br>').appendTo($('#image-container'));
		for(reco in response.recommendations){
			$('<img src='+response.recommendations[reco].image_urls[0]+' height="100">'+response.recommendations[reco].name+'</img>').appendTo($('#image-container'));
		}
	});
}

function getFeaturedCategories(){
	var param = new Object();
	param["topic_ids"] = "cat_featured";
	Hunch.api('get-topics', param, function(response){
		for(id in response.topics[0].subtopics){
			getHunchReco(response.topics[0].subtopics[id].topic_id, response.topics[0].subtopics[id].name);
		}
	})
}
</script>
<body>
<html>

<div id="header">
	<div class="container">
		<a href="/" id="headerLogo">Bemigo</a>
		<div id="headerDashboard">
			<img src="http://anotherlove.org/t.jpg" height="40" width="40" />
			<ul>
				<li><a href="#" id="friends">Friends</a></li>
				<li><a href="#" id="matches">Matches</a></li>
				<li><a href="#" id="messages">Messages</a></li>
				<li><a href="#" id="search">Search</a></li>
			</ul>
		</div>
		<!-- <span id="currentStatus">
			<?php
			echo "You are currently creating a profile for ".$this->friend_name;
			?>
		</span>
		<div id="login"><a href="/index/logout" class="btnGray">Logout</a></div> -->
		<div id="fb-root"></div>
		<div class="clear"></div>
	</div>
</div>
	<div class="container">
		<div class="a">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
		<div class="b">
			<h2><?php echo "Now give ".$this->friend_name." some personality!"; ?></h2>
			<h3><?php echo "Which best describes ".$this->friend_name."?"; ?></h3>
			<div class="panel">
				<div id="topicsList" class="floatLeft">
					<h4>Popular Topics</h4>
					<ul>
						<li><a href="#">Art &amp; Design</a></li>
						<li><a href="#">Books</a></li>
						<li><a href="#">Food</a></li>
						<li><a href="#">Fashion</a></li>
						<li><a href="#">Movies</a></li>
						<li><a href="#">Music</a></li>
						<li><a href="#">Sports</a></li>
						<li><a href="#">Travel</a></li>
					</ul>
				</div>
				<div id="topicsPics" class="floatRight">
					<ul>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<li><img src="http://anotherlove.org/t.jpg" height="82" width="82" /></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="c">
			<h2>Sponsors</h2>
				<p>Ads go here</p>
		</div>
		<div class="clear"></div>
	</div>
</html>
</body>

